<template>
  <div class="index">
    <div class="home-container">
      <div class="top-container">
        <img class="top-container__img" src="@/assets/icons/svg/hicon3.svg" alt="">
        <div>
          <div class="top-container__title">待办项目</div>
          <div class="top-container__value">{{ tjData?.dbNum  || 0 }}</div>
        </div>
        <div class="top-container__btn" @click="showList(1)">查看</div>
      </div>
      <div class="top-container">
        <img class="top-container__img" src="@/assets/icons/svg/hicon2.svg" alt="">
        <div>
          <div class="top-container__title">已办项目</div>
          <div class="top-container__value">{{ tjData?.completeNum  || 0  }}</div>
        </div>
        <div class="top-container__btn"  @click="showList(2)">查看</div>
      </div>
      <div class="top-container">
        <img class="top-container__img" src="@/assets/icons/svg/hicon1.svg" alt="">
        <div>
          <div class="top-container__title">全部项目</div>
          <div class="top-container__value">{{ tjData?.total || 0 }}</div>
        </div>
        <div class="top-container__btn"  @click="showList(3)">查看</div>
      </div>
    </div>

    <div class="table-container">
      <div class="table-container__top">
        <div class="table-container__top--title">{{['','待办','已办','全部'][currentList]}}项目列表</div>
        <t-button theme="primary"  @click="goRoute('projectAssessment/create/create')">
          <template #icon><add-icon /></template>
          新建项目
        </t-button>
      </div>
    <div v-if="tableData?.list?.length>0">
      <common-table ref="tableRef" :data="tableData" :fromMenu = "0" @refresh-list="refresh" @refresh-sort="refreshSort"></common-table>
    </div>
    <div v-else class="table-container__empty">
        <img class="table-container__empty--img" src="@/assets/icons/svg/empty.svg" alt="">
        <div class="table-container__empty--text">暂无内容</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { AddIcon } from 'tdesign-icons-vue-next';
import CommonTable from '@/views/components/table/CommonTable.vue';
import { getAssessSortList,getAssessTj } from "@/api/sjhg/assess";
import { ref } from 'vue';
const router = useRouter();
const goRoute = (path, id) =>{
          const query = {}
            if (id) {
              query.id = id
            }
            router.push({
              path: './' + path,
              query,
            })
}

//-------------------------接口------------------------------------
const tableRef = ref(null)
const tableData = ref({});
// submit_time 对应的是列表中的提交时间   submit_process对应的是状态  approval_time对应的是审核时间
// DESC代表降序  ASC代表升序 用户侧的sortField默认传update_time   sortOrder默认传DESC
let params = {
  pageNum :1,
  pageSize : 10,
  status: 1,
  sortField: 'update_time',
  sortOrder: 'DESC',
}
const refresh = (changeParams) =>{
  if(changeParams?.pagination){
    params.pageNum = changeParams.pagination.current
    params.pageSize = changeParams.pagination.pageSize
  }else if(changeParams?.sorter){
    params.pageNum = 1
    params.sortOrder = changeParams?.sorter.descending ? 'DESC':'ASC'
    if(changeParams?.sorter.sortBy === 'approvalTime'){
      params.sortField = 'approval_time'
    }else if(changeParams?.sorter.sortBy === 'submitTime'){
      params.sortField = 'submit_time'
    }else if(changeParams?.sorter.sortBy === 'submit_process'){
      params.sortField = 'submit_process'
    }
  }else{
    params.pageNum = 1
    params.sortField = 'update_time'
    params.sortOrder = 'DESC'
  }
  isTabChange.value = false
  getList();
}

// const refreshSort = (sorter) =>{
//   console.log(sorter.descending)
//   console.log(sorter.sortBy)
//   params.sortOrder = sorter.descending ? 'DESC':'ASC'
//   if(sorter.sortBy === 'updateTime'){
//     params.sortField = 'approval_time'
//   }else if(sorter.sortBy === 'submitTime'){
//     params.sortField = 'submit_time'
//   }
//   getList();
// }

let currentList = ref(1)
const isTabChange = ref(false)

//1-待办 2-已完成  3-全部
const showList = (sta)=>{
  isTabChange.value = true
  params.pageNum = 1
  currentList.value = sta
  params.status = sta
  getList()
}



// 用户侧评估项目列表
onMounted(async() => {
  await getTj();
  await getList();
})
//列表
const getList = () => {
  getAssessSortList(params)
      .then((res) => {
        if (res.code == 200) {
          tableData.value = res.data || {}
          // const list = []
          // res.data?.data?.forEach(element => {
          //   list.push(...element.child)
          // });
          tableData.value.list = res.data?.data
          console.log('tableData = ', tableData.value)
          // 可选：检查方法是否存在
          if( isTabChange.value ){
            if (tableRef.value && typeof tableRef.value.refreshData === 'function') {
              tableRef.value.refreshData(tableData.value.total)
            }
          }
        }
      }).finally(() => {
      });
}
//统计
const tjData = ref(null)
const getTj = () => {
  getAssessTj()
      .then((res) => {
        if (res.code == 200) {
          tjData.value = res.data
        }
      }).finally(() => {
      });
}
</script>
<style lang="scss" scoped>
.home-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.top-container{
  display: flex;
  height: 88px;
  background: var(--bg-white);
  border-radius: 8px;
  padding: 0 16px;
  position: relative;
  font-family: PingFang SC-Bold, PingFang SC;
  &__img{
    width: 56px;
    height: 56px;
    margin-right: 10px;
    margin-top: 16px;
  }
  &__title{
      color: #565960;
      font-size: 12px;
      margin-top: 16px;
      font-weight: 500;
    }
   
    &__value{
      color: #252931;
      font-size: 18px;
      font-weight: 600;
      margin-top: 16px;
    }  
    &__btn{
      right: 16px;
      top: 16px;
      position: absolute;
      color: #1966FF;
      cursor: pointer;
      font-size: 12px;
      font-weight: 400;
    }
}
.index {
  padding: 0;
  margin-top: 16px;
}
.index-l {
  width: 76%;
  .userinfo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 218px;
    border-radius: var(--border-radius-big);
    padding: 0px 20px 20px;
    margin-top: -38px;
    .bgSvg {
      color: var(--bg-white);
      position: absolute;
    }
    .portrait {
      position: relative;
      padding: 10px;
      .portrait-img {
        display: block;
        margin: 0 auto;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 1px solid var(--border-black-11);
      }
    }
    .wel {
      position: relative;
      font-size: 22px;
      font-weight: bold;
      margin: 2px 0 16px;
      width: 100%;
    }
    .role {
      position: relative;
      color: white;
      padding: 6px 8px;
      font-size: 12px;
      line-height: 1;
      border-radius: var(--border-radius-small);
    }
  }
  .data-view {
    margin: 0 0 0 16px;
    flex: auto;
    .data-view-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 30px -20px 0;
    }
    .data-view-item {
      border-left: 1px solid var(--bg-black-9);
      &:first-child {
        border: 0;
      }
    }
    .view-item-icon {
      width: 54px;
      height: 54px;
      overflow: hidden;
      background: var(--bg-black-11) center no-repeat;
      // background-repeat: no-repeat;
      border-radius: var(--border-radius-big);
      margin: 0 16px;
    }

    .view-item-title {
      color: var(--font-black-4);
      margin-bottom: 10px;
    }
    .view-item-num {
      font-size: 24px;
      font-weight: 500;
      color: var(--font-black);
      font-family: Bahnschrift-Regular, Bahnschrift;
    }
  }
}

.index-r {
  width: 23%;
  margin-left: 1%;

  .inedx-r-top {
    .companyName {
      line-height: 36px;
      font-size: 18px;
      font-weight: 500;
      color: var(--font-black);
      font-weight: bold;
    }

    .info {
      line-height: 24px;
      margin-top: 10px;
      color: var(--font-black-4);
      .fr {
        color: var(--font-black);
        font-weight: bold;
      }
    }
  }
  //   企业动态
  .card-title {
    background: linear-gradient(270deg, var(--color) 0%, var(--color-sub) 100%);
    padding-bottom: 10px;
  }
  .title-right-icon {
    width: 16px;
    height: 16px;
    line-height: 15px;
    background: var(--bg-white);
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
  }
  .enterprise-card-item {
    overflow: hidden;
    border-radius: var(--border-radius-big);
    margin-top: -10px;
    padding-top: 0;
    .dynamics-item {
      border-bottom: 1px solid var(--border-black-10);
      padding: 16px 0;

      .info {
        span {
          vertical-align: middle;
        }
        .type {
          display: inline-block;
          max-width: 80px;
          padding: 4px 5px 3px;
          border-radius: 4px;
          font-size: 12px;
          margin-right: 8px;
        }
        .customer {
          background: #ecf5ff;
          color: #1869ff;
          border-color: #1869ff;
        }
        .staff {
          background: var(--color-light-10);
          color: var(--color);
          border-color: var(--color);
        }
        .type1 {
          padding: 5px 8px 4px;
          border-radius: 4px;
          background: none;
          font-size: 12px;
          border: 1px solid;
          flex: none;
        }
        .operatorName {
          font-size: 16px;
          color: var(--font-black);
          font-weight: 600;
        }
      }

      .operator {
        font-size: 12px;
        color: var(--font-black-4);
        margin-top: 10px;
        .nomal {
          color: var(--color);
        }
        .unnomal {
          color: #e34d59;
        }
      }
    }

    .g-tip-color {
      text-align: center;
      width: 100%;
      margin-top: 20px;
    }
  }

  .help-center {
    .help-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-black-10);
      padding: 16px 0;
      // font-size: 12px;
      &:first-of-type {
        margin-top: -16px;
      }
      span {
        vertical-align: middle;
      }
      .left-icon {
        font-size: 26px;
        vertical-align: middle;
        margin-right: 10px;
      }
      .right-icon {
        font-size: 20px;
      }
    }
  }
}

.dialog-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 260px;
    height: 260px;
  }
  span {
    font-size: 20px;
    line-height: 50px;
  }
}
</style>
